<template>
  <div>
    <form action="/">
      <van-field
        style="padding-left: 23px"
        left-icon="calendar-o"
        clickable
        readonly
        name="calendar"
        :value="listQuery.search_date"
        placeholder="点击选择日期"
        @click="showCalendar = true"
        clearable
      />
    </form>
    <van-popup v-model="showCalendar" position="bottom">
      
      <van-picker
        title="选择时间年"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell center title="合计：" :value="(total_fees || 0) + ' 元'" />
      <van-cell-group title="车辆小计:">
        <van-cell
          v-for="item in datas"
          :key="item.car_number"
          :title="item.car_number"
          :value="item.total_fees + ' 元'"
        >
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import { getGroupsYearReport } from "@/api/groups";

export default {
  name: "SearchStats",
  components: {
    // NavBar,
  },
  props: ["groups_id"],
  computed: {
    columns() {
      let year = new Date().getFullYear();
      let arr_year = []
      for(let i = 0; i<=4; i++ ){
        arr_year.push(year - i)
      }
      return arr_year;
    },
  },
  data() {
    return {
      title: this.$route.meta.title,

      datas: [],
      total_fees: 0,
      loading: false,
      finished: false,
      showCalendar: false,
      curentDate: null,

      listQuery: {
        groups_id: this.groups_id,
        search_date: new Date().getFullYear(),

      },
    };
  },
  mounted() {},
  methods: {
    onLoad() {
      this.getYearStats();
    },
    onSearch() {
      // console.log(val);
      this.datas = [];
      this.listQuery.page = 1;
      this.onLoad();
    },

    onCancel() {
      // this.datas = [];
      // this.total_fees = 0;
      this.showCalendar = false;
      // this.listQuery.search_date = null;

      // this.onLoad();
    },

    onConfirm(vaLue) {
      // const [start, end] = date;
      this.showCalendar = false;

      this.listQuery.search_date = vaLue
      this.datas = [];
      this.total_fees = 0;
      this.onLoad();
    },

    getYearStats() {
      this.loading = true;
      getGroupsYearReport(this.listQuery)
        .then((res) => {
          this.datas = res.data.results;
          this.total_fees = res.data.total_fees;
          this.loading = false;
          this.finished = true;
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$notify({
            type: "danger",
            message: "获取数据失败！",
          });
        });
    },
  },
};
</script>

<style  scoped>
</style>